<template>
  <scroll-view scroll-y="ture" style="height: 100vh" class="giftcard_content">
    <view class="show_card">
      <image alt="" :src="showUrl" />
    </view>
    <view class="show_title">
      {{ showWish }}
      <image class="line_1" :src="oss2('funCard/card_line.png')" />
      <image class="line_2" :src="oss2('funCard/card_line.png')" />
    </view>

    <view class="show_user">
      From:<image :src="userInfo.icon" />
      <span class="user_name">{{ userInfo.nickname || "微信用户" }}</span>
    </view>
    <!-- 第一步-选择卡面/祝福语 -->
    <view v-if="funStep === 0" class="bottom_animotion">
      <view class="card_title">
        挑选卡面背景<image :src="oss2('funCard/card_down.png')" />
      </view>
      <view class="card_swiper flex">
        <view
          class="card_item"
          v-for="(item, index) in cardList"
          :key="item.id"
          @click="chooseCard(index)"
          :style="{
            backgroundImage: `url(${item.imageUrl})`,
          }"
          :class="!isMineCard && index === currentCard ? 'choose_item' : ''"
        >
          <image
            alt=""
            v-if="!isMineCard && index === currentCard"
            class="img_icon"
            :src="oss2('funCard/card_choose.png')"
          />
        </view>
        <view
          class="card_item"
          @click.stop="toChoose"
          :style="{
            backgroundImage: `url(${oss2('funCard/card_mine.png')})`,
          }"
        >
        </view>
      </view>

      <view class="card_title">
        挑选祝福语<image :src="oss2('funCard/card_down.png')" />
      </view>
      <view class="show_card card_text">
        <radio-group class="wish_content" @change="radioChange">
          <label v-for="(item, index) in wishList" :key="index">
            <view class="flex justify-between wishItem">
              <view
                :class="
                  !isMineWish && currentWish === item.id
                    ? 'chooseText'
                    : 'wishText'
                "
              >
                {{ item.blessingWord }}
              </view>
              <radio
                style="transform: scale(0.6)"
                :value="item.id"
                :checked="!isMineWish && currentWish === item.id"
                color="#0044C9"
              />
            </view>
          </label>
        </radio-group>

        <view class="mine_wish" @click.stop="toWish">
          自定义祝福语
          <image :src="oss2('funCard/card_edit.png')" />
        </view>
        <view
          v-if="showText"
          class="mine_text bottom_animotion"
          :style="{
            backgroundImage: `url(${oss2('funCard/card_mine_back.png')})`,
          }"
        >
          <textarea
            v-model="mineText"
            :rows="2"
            maxlength="30"
            @input="wishChange"
          ></textarea>
          <label class="text_limit">{{ mineText.length }}/30</label>
        </view>
      </view>

      <button class="next_btn" @click.stop="nextStep">下一步</button>
      <view class="agree_content">
        <radio
          style="transform: scale(0.7)"
          color="#0058C6"
          :value="isAgree"
          :checked="isAgree"
          @click="setAgree"
        />
        <view class="agree_text">我已仔细阅读并同意如下条款</view>
      </view>

      <view class="bottom_btn">
        <view @click="toText('使用须知')">使用须知</view>
        <view @click="toText('区域限购')">区域限购</view>
      </view>
    </view>
    <!-- 第二步-选择商品 -->
    <view v-if="funStep === 1" class="bottom_animotion">
      <view class="goods_title">- 挑选礼物 - </view>
      <view class="goods_info">
        <image class="goods_img" :src="goodsInfo.imageUrl" />
        <view class="goods_name">{{ goodsInfo.name }}</view>
        <view class="goods_price" v-if="!isShowPrice"
          >￥{{ goodsInfo.lowestPrice }}</view
        >
        <view v-if="isShowPrice" class="goods_choose">
          <view class="size">{{ skuInfo.key + "：" + skuInfo.value }} </view>
          <view> * {{ productSku.quantity }}</view>
        </view>
        <view class="goods_size" @click.stop="isGoodsPopup = true">
          选择规格
        </view>
        <view class="goods_detail" @click="toDetaiil">
          查看详情
          <view class="goods_icon"></view>
        </view>
      </view>

      <view
        class="notice_content"
        v-if="!isKnow"
        @click="setKnow"
        :style="{
          backgroundImage: `url(${oss2('funCard/goods_flag.png')})`,
        }"
      />

      <view class="price_content">
        <view class="price_text">
          <label>1份礼品</label>
          <view @click.stop="showPrice" v-if="isShowPrice">
            价格明细
            <image
              :src="ossImg('funCard/goods_detail.png')"
              :style="{
                transform: `rotate(${isPricePopup === true ? '180deg' : '0'})`,
              }"
            />
          </view>
        </view>
        <view class="price_price"
          >￥<label>
            {{ goodsInfo.lowestPrice * productSku.quantity || "0.00" }}
          </label>
        </view>
        <view
          class="price_btn"
          :class="{
            disabled: !isShowPrice,
          }"
          @click.stop="onCreateOrder"
        >
          <image v-if="isShowPrice" :src="oss2('funCard/goods_icon.png')" />
          <image v-else :src="oss2('funCard/goods_icon_wait.png')" />
          购买礼物
        </view>
      </view>
    </view>
  </scroll-view>

  <!-- 头像昵称授权 -->
  <oreo-popup round :show="isAvatarPopup" position="bottom">
    <avatar-popup
      class="avatar-popup"
      v-if="isAvatarPopup"
      :userInfo="userInfo"
      @close="getUserInfo"
    />
  </oreo-popup>
  <!-- 选择规格 -->
  <oreo-popup round :show="isGoodsPopup" position="bottom">
    <goods-sku
      v-if="isGoodsPopup"
      :product="goodsInfo"
      :productSku="productSku"
      @confirm="comfirmSize"
      @skuChange="changeSku"
      @close="isGoodsPopup = false"
    />
  </oreo-popup>
  <!-- 价格明细 -->
  <oreo-popup :show="isPricePopup" round position="bottom">
    <preference-detail
      v-if="isPricePopup"
      :info="productSku"
      @close="isPricePopup = false"
    />
  </oreo-popup>
  <!-- 自定义内容错误提示 -->
  <notice-popup v-if="showNotice" :errorText="errorText" @close="resizeAll">
  </notice-popup>
  <!-- 使用须知及区域限购 -->
  <text-popup
    v-if="showTextDialog"
    :keyName="textKey"
    @close="showTextDialog = false"
  >
  </text-popup>

  <img-cropper ref="imgCropper" @getImg="getImg"></img-cropper>


</template>

<script setup>
import ImgCropper from "./components/img-cropper.vue";
import AvatarPopup from "./components/avatar-popup.vue";
import GoodsSku from "./components/goods-sku";
import PreferenceDetail from "@/components/preference-detail";
import NoticePopup from "./components/notice-popup.vue";
import TextPopup from "@/components/text-popup.vue";
import privacyPopup from "@/components/privacy-popup";

import {
  onLoad,
  onShow,
  onHide,
  onUnload,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { ref, nextTick } from "vue";
import { ossImg, oss2, message, debounce } from "@/utils/utils";
import {
  GetCardList,
  GetWishList,
  CheckImage,
  GetGoodsInfo,
  CreateOrder,
  Subscribe,
} from "@/services/giftcard.js";
import { wxOrderPurchase } from "@/services/mall";

let enterTime = "";
let outTime = "";
let stayTime = "";

const userInfo = ref({});
const isAvatarPopup = ref(false);
const isKnow = ref(false);
const isAgree = ref(false);

const funStep = ref(0); // 0-选择卡面/祝福语；1-选择商品
const themeId = ref(0);
const cardList = ref([]);
const currentCard = ref(0); // 已选卡面下标
const isMineCard = ref(false); // 卡面自定义标识
const showUrl = ref(""); // 已选卡面地址
const showWish = ref("许个愿吧！");
const wishList = ref([]);
const currentWish = ref(0); // 已选祝福语id
const isMineWish = ref(false); // 祝福语自定义标识
const showText = ref(false);
const mineText = ref(""); // 自定义祝福语内容

const goodsInfo = ref({});
const productSku = ref({});
const skuInfo = ref({});
const isGoodsPopup = ref(false);
const isPricePopup = ref(false);
const isShowPrice = ref(false);

const showNotice = ref(false);
const errorText = ref("");
const showTextDialog = ref(false);
const textKey = ref("");

const imgCropper = ref(null);

onLoad((option) => {
  getUserInfo();

  if (uni.getStorageSync("FUNCARD")) {
    isKnow.value = uni.getStorageSync("FUNCARD");
  }
  if (uni.getStorageSync("FUNCARDAGREE")) {
    isAgree.value = uni.getStorageSync("FUNCARDAGREE");
  }

  themeId.value = option.themeId;
  getCardList();
  getWishList();
});
onShow(() => {
  // 用户进入时间
  enterTime = new Date();
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "fc_choose_card",
    "view",
    "fc_card_page",
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "fc_choose_card",
    "view",
    "fc_card_page",
    stayTime
  );
});

const getUserInfo = () => {
  getApp()
    .getUserInfo()
    .then((res) => {
      userInfo.value = {
        nickname: res.nickname,
        icon: res.icon,
      };
    });
  if (isAvatarPopup.value) {
    isAvatarPopup.value = false;
  }
};
const getCardList = async () => {
  const { data } = await GetCardList(themeId.value);
  cardList.value = data;
  showUrl.value = data[0].imageUrl;
};
const getWishList = async () => {
  let { data } = await GetWishList(themeId.value);
  if (data && data.length > 3) {
    data = data.slice(0, 3);
  }
  wishList.value = data;
  currentWish.value = data[0].id;
  showWish.value = data[0].blessingWord;
};
const chooseCard = (index) => {
  getApp().emdlz2(
    "track",
    "event",
    "fc_choose_card",
    "click",
    "fc_cover_" + cardList.value[index].id,
    ""
  );
  currentCard.value = index;
  showUrl.value = cardList.value[index].imageUrl;
  if (isMineCard.value) {
    isMineCard.value = false;
  }
};
const toChoose = () => {
  getApp().emdlz(
    "track",
    "event",
    "fc_choose_card",
    "click",
    "fc_cover_自定义",
    ""
  );
  imgCropper.value.chooseImage(imgCropper);
};
const getImg = (e) => {
  uni.showLoading({ title: "图片上传中" });
  nextTick(() => {
    uni.uploadFile({
      url: process.env.BASE_API + "s-content/api/material/upload", //服务器地址
      fileType: "image",
      filePath: e,
      name: "file",
      formData: {},
      header: {
        "content-type": "multipart/form-data",
        Authorization: `Bearer ${uni.getStorageSync("TOKEN")}`,
      },
      success: (res) => {
        console.log("图片地址", res);
        if (JSON.parse(res.data).data) {
          imageCheck(JSON.parse(res.data).data);
        } else {
          message(JSON.parse(res.data).error);
        }
      },
      fail: (err) => {
        message(err.errMsg);
      },
      complete: (res) => {
        uni.hideLoading();
      },
    });
  });
};

const radioChange = (e) => {
  if (showText.value) {
    showText.value = false;
  }
  if (isMineWish.value) {
    isMineWish.value = false;
  }
  currentWish.value = e.detail.value;
  const i = wishList.value.findIndex((item) => item.id === e.detail.value);
  showWish.value = wishList.value[i].blessingWord;

  getApp().emdlz(
    "track",
    "event",
    "fc_choose_card",
    "click",
    "fc_words_" + wishList.value[i].id,
    ""
  );
};
const toWish = () => {
  showText.value = !showText.value;
  if (!showText.value) {
    if (!mineText.value || mineText.value.length === 0) {
      isMineWish.value = false;
      const i = wishList.value.findIndex(
        (item) => item.id === currentWish.value
      );
      showWish.value = wishList.value[i].blessingWord;
    } else {
      isMineWish.value = true;
      showWish.value = mineText.value;
    }
  } else {
    getApp().emdlz(
      "track",
      "event",
      "fc_choose_card",
      "click",
      "fc_words_自定义",
      ""
    );
  }
};
const wishChange = debounce(
  () => {
    showWish.value = mineText.value;
    if (!isMineWish.value) {
      isMineWish.value = true;
    }
  },
  500,
  false
);

const nextStep = async () => {
  getApp().emdlz("track", "event", "fc_choose_card", "click", "fc_next", "");
  if (!showWish.value || showWish.value.length === 0) {
    message("请输入祝福语！");
    return;
  }
  if (isMineWish.value) {
    textCheck();
  } else {
    toNext();
  }
};
const toNext = async () => {
  if (!isAgree.value) {
    message("请同意使用条款");
    return;
  }
  if (
    userInfo.value.nickname === "微信用户" ||
    userInfo.value.icon === "" ||
    userInfo.value.icon === process.env.OSS_IMG + "personal/moren_avatar.png"
  ) {
    isAvatarPopup.value = true;
  } else {
    const { data } = await GetGoodsInfo();
    goodsInfo.value = data;
    funStep.value = 1;
  }
};

const changeSku = (sku) => {
  skuInfo.value = sku;
};
const comfirmSize = (skuItem) => {
  productSku.value = {
    giftCardProductSkuId: skuItem.productSkuId,
    quantity: skuItem.quantity,
    title: "价格明细",
    totalPrice: goodsInfo.value.lowestPrice * skuItem.quantity,
    finalPrice: goodsInfo.value.lowestPrice * skuItem.quantity,
  };
  isGoodsPopup.value = false;
  isShowPrice.value = true;
};
const showPrice = () => {
  if (!isShowPrice.value) return;
  getApp().emdlz(
    "track",
    "event",
    "fc_choose_product",
    "click",
    "fc_price",
    ""
  );
  isPricePopup.value = true;
};

const onCreateOrder = debounce(
  async () => {
    if (!isShowPrice.value) {
      return;
    } else {
      isShowPrice.value = false;
    }
    getApp().emdlz(
      "track",
      "event",
      "fc_choose_product",
      "click",
      "fc_buy_" + goodsInfo.value.lowestPrice * productSku.value.quantity,
      ""
    );
    let form = {
      appId: process.env.WXAPPID,
      themeId: themeId.value,
      giftCardProductSkuId: productSku.value.giftCardProductSkuId,
      quantity: productSku.value.quantity,
    };
    if (isMineCard.value) {
      Object.assign(form, { customFront: showUrl.value });
    } else {
      Object.assign(form, { frontId: cardList.value[currentCard.value].id });
    }
    if (isMineWish.value) {
      Object.assign(form, { customWord: mineText.value });
    } else {
      Object.assign(form, { wordId: currentWish.value });
    }
    const res = await CreateOrder(form);
    if (res?.code === 200) {
      orderPurchase(res.data);
    } else {
      message(res.message);
    }
  },
  1000,
  false
);
const orderPurchase = async (id) => {
  getApp()
    .sr()
    .track("custom_order", {
      order: {
        order_id: id,
        order_time: Date.now(),
        order_status: "pay",
      },
      sub_orders: [
        {
          sub_order_id: id,
          order_amt: goodsInfo.value.lowestPrice * productSku.value.quantity,
          pay_amt: goodsInfo.value.lowestPrice * productSku.value.quantity,
        },
      ],
      // more...
    });

  const res = await wxOrderPurchase({ id, appId: process.env.WXAPPID });
  console.log("------------------支付", res.data);
  if (res?.code === 200) {
    uni.requestPayment({
      provider: "wxpay", //支付类型-固定值
      timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
      nonceStr: res.data.nonceStr, // 随机字符串
      package: res.data.package, // 固定值
      signType: res.data.signType, //固定值
      paySign: res.data.paySign, //签名
      success: async function (res) {
        console.log("success:" + JSON.stringify(res));

        getApp()
          .sr()
          .track("custom_order", {
            order: {
              order_id: id,
              order_time: Date.now(),
              order_status: "payed",
            },
            sub_orders: [
              {
                sub_order_id: id,
                order_amt:
                  goodsInfo.value.lowestPrice * productSku.value.quantity,
                pay_amt:
                  goodsInfo.value.lowestPrice * productSku.value.quantity,
              },
            ],
            // more...
          });

        console.log(1123132, uni.getLaunchOptionsSync());
        message("支付成功", 1000);

        // 订阅
        uni.requestSubscribeMessage({
          tmplIds: [
            process.env.FUNCARDDELIVERYNOTICE,
            process.env.FUNCARDSIGNNOTICE,
            process.env.FUNCARDREFUNDSUCCESSNOTICE,
          ],
          success: async (res2) => {
            await Subscribe({
              appId: process.env.WXAPPID,
              orderId: orderId.value,
              scene: [
                "GIFTCARD_STATE_CHANGE",
                "ORDER_DELIVERY",
                "REFUND_SUCCEED",
              ],
            });
          },
          fail: function (err) {
            console.log(err);
          },
        });

        uni.redirectTo({
          url: "/funCard/share?orderId=" + id + "&type=send",
        });
      },
      fail: function (err) {
        console.log("fail:" + JSON.stringify(err));
        getApp()
          .sr()
          .track("custom_order", {
            order: {
              order_id: id,
              order_time: Date.now(),
              order_status: "cancel_pay",
            },
            sub_orders: [
              {
                sub_order_id: id,
                order_amt:
                  goodsInfo.value.lowestPrice * productSku.value.quantity,
                pay_amt:
                  goodsInfo.value.lowestPrice * productSku.value.quantity,
              },
            ],
            // more...
          });

        uni.showModal({
          title: "确定取消支付吗？",
          content: "120分钟内未付款，订单将自动关闭，请尽快付款哦！",
          cancelText: "稍后付款",
          confirmText: "继续付款",
          success: function (res) {
            if (res.confirm) {
              console.log("用户点击确定");
              orderPurchase(id);
            } else if (res.cancel) {
              console.log("用户点击取消");
              message("取消支付");
              uni.redirectTo({ url: "/funCard/orderDetail?orderId=" + id });
            }
          },
        });
      },
    });
  } else {
    message(res.message);
  }
};

const textCheck = async () => {
  uni.showLoading({ title: "文案审核中" });
  uni.request({
    url: process.env.BASE_API + `s-wechat/api/secure/text`,
    method: "post",
    header: {
      Authorization: "Bearer " + uni.getStorageSync("TOKEN"),
      "Content-Type": "application/json; charset=utf-8",
    },
    data: mineText.value,
    success: function (res) {
      if (res.data.data) {
        toNext();
      } else {
        showNotice.value = true;
        errorText.value = "您上传的文字审核不通过";
      }
      uni.hideLoading();
    },
    fail: function (err) {
      uni.hideLoading();
    },
  });
};
const imageCheck = async (val) => {
  uni.showLoading({ title: "图片审核中" });
  const { data } = await CheckImage({
    imageUrl: val,
  });
  if (data) {
    isMineCard.value = true;
    showUrl.value = val;
  } else {
    showNotice.value = true;
    errorText.value = "您上传的图片审核不通过";
  }
  uni.hideLoading();
};

const toDetaiil = () => {
  uni.navigateTo({
    url: "/funCard/goodDetail?image=" + goodsInfo.value.detailImageUrl,
  });
};
const toText = (key) => {
  let clickKey = "";
  if (key === "使用须知") {
    clickKey = "fc_instruction";
  } else {
    clickKey = "fc_purchase_restrictions_1";
  }
  getApp().emdlz("track", "event", "fc_choose_card", "click", clickKey, "");
  showTextDialog.value = true;
  textKey.value = key;
};
const setKnow = () => {
  getApp().emdlz(
    "track",
    "event",
    "fc_choose_product",
    "click",
    "fc_known",
    ""
  );
  isKnow.value = true;
  uni.setStorageSync("FUNCARD", true);
};
const setAgree = () => {
  getApp().emdlz("track", "event", "fc_choose_card", "click", "fc_agree", "");
  isAgree.value = true;
  uni.setStorageSync("FUNCARDAGREE", true);
};
const resizeAll = () => {
  showNotice.value = false;
  funStep.value = 0;
};

onShareAppMessage((e) => {
  const shareObj = {
    title: "快来定制你的奥利奥玩心FUN享卡！", // 默认是小程序的名称(可以写slogan等)
    path: "/funCard/index", // 默认是当前页面，必须是以‘/’开头的完整路径
    imageUrl: oss2("funCard/card_wx.png"), //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: (res) => {
      // 转发成功之后的回调
      if (res.errMsg == "shareAppMessage:ok") {
      }
    },
    fail: (err) => {
      // 转发失败之后的回调
      console.log("转发失败之后的回调", err);
      if (res.errMsg == "shareAppMessage:fail cancel") {
        // 用户取消转发
        console.log("用户取消转发");
      } else if (res.errMsg == "shareAppMessage:fail") {
        // 转发失败，其中 detail message 为详细失败信息
        console.log("转发失败，其中detail message 为详细失败信息");
      }
    },
    complete: () => {
      // 转发结束之后的回调（转发成不成功都会执行）
      console.log("转发结束之后的回调（转发成不成功都会执行）");
    },
  };
  console.log(shareObj);
  return shareObj;
});
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";
@keyframes PopupAm {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.bottom_animotion {
  animation: PopupAm 0.5s;
  -moz-animation: PopupAm 0.5s; /* Firefox */
  -webkit-animation: PopupAm 0.5s; /* Safari 和 Chrome */
  -o-animation: PopupAm 0.5s; /* Opera */
}
.giftcard_content {
  position: relative;
  width: 375px;
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding-top: 27px;
  font-family: Source Han Sans CN;
  .show_card {
    width: 235px;
    height: 144px;
    border-radius: 8px;
    box-shadow: 0px 9px 10px 0px rgba(198, 198, 198, 0.5);
    margin: 0 auto;
    margin-bottom: 8px;
    image {
      width: 235px;
      height: 100%;
      border-radius: 8px;
    }
  }
  .show_title {
    position: relative;
    width: 236px;
    height: 62px;
    line-height: 33px;
    font-size: 15px;
    color: #000000;
    margin: 0 auto;
    image {
      position: absolute;
      left: 0;
      width: 236px;
      height: 1px;
    }
    .line_1 {
      top: 31px;
    }
    .line_2 {
      bottom: 0;
    }
  }
  .show_user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 222px;
    height: 36px;
    margin: 12px auto;
    font-size: 15px;
    color: #000000;
    image {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-left: 6px;
      margin-right: 4px;
    }
    .user_name {
      font-size: 10px;
      font-weight: 400;
      color: #6f6f6f;
    }
  }
  .card_title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 11px;
    padding-left: 15px;
    line-height: 11px;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 400;
    color: #6f6f6f;
    image {
      width: 8px;
      height: 4px;
      margin-left: 6px;
    }
  }
  .card_swiper {
    position: relative;
    width: 100%;
    height: 79px;
    box-sizing: border-box;
    padding: 15px;
    margin-top: 3px;
    margin-bottom: 15px;
    .card_item {
      position: relative;
      box-sizing: border-box;
      width: 80px;
      height: 49px;
      box-shadow: 0px 9px 10px 0px rgba(198, 198, 198, 0.5);
      border-radius: 8px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 80px 49px;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    .choose_item {
      border: 2px solid #0044c9;
    }
    .img_icon {
      position: absolute;
      width: 24px;
      height: 24px;
      right: -12px;
      top: -14px;
      z-index: 2;
    }
  }
  .card_text {
    margin-top: 10px;
    margin-bottom: 40px;
    min-height: 126px;
    height: auto;
    box-sizing: border-box;
    padding: 3px 11px 10px 11px;
    .wish_content {
      min-height: 90px;
    }
    .wishItem {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding-left: 10px;
      line-height: 30px;
      font-size: 12px;
      font-weight: 400;
    }
    .wishText {
      color: #6f6f6f;
    }
    .chooseText {
      color: #000000;
    }

    .mine_wish {
      position: relative;
      width: 67px;
      height: 13px;
      margin-top: 9px;
      margin-left: 9px;
      box-sizing: border-box;
      border-bottom: 1px solid #0044c9;
      line-height: 13px;
      font-size: 11px;
      font-weight: 400;
      color: #0044c9;
      image {
        position: absolute;
        width: 16px;
        height: 12px;
        top: 2px;
        right: -24px;
      }
    }
    .mine_text {
      position: relative;
      width: 214px;
      height: 75px;
      margin-top: 6px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 214px 72px;
      textarea {
        width: 214px;
        height: 72px;
        box-sizing: border-box;
        padding: 13px 10px;
        font-size: 10px;
        font-weight: 400;
        color: #000000;
        line-height: 18px;
      }
      .text_limit {
        position: absolute;
        right: 6px;
        bottom: 6px;
        font-size: 8px;
        color: #6f6f6f;
      }
      // .finish_text {
      //   width: 100%;
      //   height: 16px;
      //   text-align: right;
      //   margin-top: 3px;
      //   line-height: 16px;
      //   font-size: 10px;
      //   font-weight: 500;
      //   color: #0044c9;
      // }
    }
  }
  .next_btn {
    width: 246px;
    height: 42px;
    line-height: 42px;
    background-color: #0044c9;
    box-shadow: 0px 4px 9px 0px rgba(0, 79, 234, 0.4);
    border-radius: 21px;
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
  }
  .agree_content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 11px;
    margin-top: 26px;
    .agree_text {
      height: 12px;
      line-height: 12px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      color: #6f6f6f;
    }
  }

  .bottom_btn {
    display: flex;
    font-size: 9px;
    font-weight: 400;
    color: #0044c9;
    justify-content: center;
    margin-top: 7px;
    padding-bottom: 24px;
    view {
      width: 36px;
      height: 11px;
      border-bottom: 1px solid #0044c9;
      text-align: center;
    }
    view:first-child {
      margin-right: 24px;
    }
  }

  .goods_title {
    height: 27px;
    line-height: 27px;
    font-size: 11px;
    font-weight: 400;
    color: #6f6f6f;
    text-align: center;
  }
  .goods_info {
    position: relative;
    width: 100%;
    height: 78px;
    box-sizing: border-box;
    padding-left: 16px;
    margin-top: 21px;
    .goods_img {
      width: 80px;
      height: 78px;
      border-radius: 5px;
      margin-right: 11px;
    }
    .goods_name {
      position: absolute;
      top: 1px;
      left: 106px;
      width: 175px;
      height: 15px;
      line-height: 15px;
      font-size: 15px;
      color: #000000;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .goods_price {
      position: absolute;
      top: 24px;
      left: 108px;
      height: 14px;
      line-height: 18px;
      font-size: 18px;
      font-weight: 800;
      color: #0044c9;
    }
    .goods_choose {
      display: flex;
      position: absolute;
      top: 24px;
      left: 108px;
      height: 16px;
      line-height: 16px;
      font-size: 11px;
      .size {
        border-radius: 4px;
        background-color: rgba(166, 166, 166, 0.5);
        padding: 0 9px;
        color: #fff;
        margin-right: 3px;
      }
    }
    .goods_size {
      position: absolute;
      bottom: 0;
      left: 106px;
      width: 83px;
      height: 24px;
      line-height: 24px;
      background: #0044c9;
      border-radius: 12px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
    }
    .goods_detail {
      position: absolute;
      top: 0;
      right: 21px;
      width: 63px;
      height: 17px;
      line-height: 17px;
      border-bottom: 1px solid #0044c9;
      font-size: 14px;
      color: #0044c9;
      .goods_icon {
        position: absolute;
        right: 0;
        bottom: 4px;
        width: 0px;
        height: 0px;
        border: 3px solid;
        border-left-color: transparent;
        border-top-color: #0044c9;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }
    }
  }
  .notice_content {
    width: 340px;
    height: 84px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 340px 84px;
    position: absolute;
    right: 18px;
    bottom: 122px;
  }
  .price_content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    box-shadow: 1px -6px 3px 0px rgba(126, 126, 126, 0.05);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 16px;
    font-size: 11px;
    color: #0044c9;
    background-color: #fff;
    .price_text {
      display: flex;
      align-items: top;
      line-height: 11px;
      margin-bottom: 10px;
      padding-left: 1px;
      label {
        color: #adadad;
        margin-right: 2px;
      }
      image {
        width: 6px;
        height: 5px;
        margin-left: 1px;
      }
    }
    .price_price {
      display: flex;
      align-items: top;
      height: 18px;
      font-size: 11px;
      font-weight: 800;
      label {
        font-size: 18px;
        margin-left: 5px;
      }
    }
    .price_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 129px;
      height: 30px;
      background: #0044c9;
      border-radius: 15px;
      font-size: 18px;
      color: #fff;
      position: absolute;
      right: 16px;
      bottom: 20px;
      &.disabled {
        background-color: #f6f6f6;
        color: #adadad;
      }
      image {
        width: 20px;
        height: 20px;
        margin-right: 9px;
      }
    }
  }
}
</style>
